<template>
  <div id="orientLayer" v-show="orientState">
    <div class="phone"></div>
    <span class="text">请旋转屏幕，竖屏观看</span>
  </div>
</template>

<script>
export default {
  name: 'Rotate',
  data () {
    return {
      orientState: false
    }
  },
  mounted () {
    // 判断横屏竖屏
    function tiao(){

      // var _w = $(window).width()
      // var _h = $(window).height()
      // console.log(_w,_h)

      // $('.swiper').css({'width': _w + 'px', 'height': _h + 'px'})
    }
    let _this=this
    function orientationChange () {
      switch (window.orientation) {
        case -90:
        case 90:
          _this.orientState=true
          break
        case 0:
        case 180:
          _this.orientState=false
          setTimeout(function(){
            tiao()
          },200)

          break
      }
    }
    window.onorientationchange = orientationChange
  }
}
</script>

<style scoped>
*::-webkit-scrollbar {
  display: none;
}

#orientLayer {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  background-size: 100% 100%;
  z-index: 999;
}

.phone {
  display: inline-block;
  width: 140px;
  height: 80px;
  background-image: url('./phone_horizon.png');
  -webkit-animation:rotation infinite 1.5s ease-in-out;
  animation:rotation infinite 1.5s ease-in-out;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  left: 40%;
  top: 28%;
}

.text {
  position: absolute;
  display: block;
  bottom: 10vw;
  width: 100%;
  text-align: center;
  color: #eee;
  font-weight: 700;
  font-size: 1.5rem;
}

@-webkit-keyframes rotation{
  10%{
    transform:rotate(90deg);-webkit-transform:rotate(90deg)
  }
  50%,60%{
    transform:rotate(-0deg);-webkit-transform:rotate(0deg)
  }
  100%{
    transform:rotate(90deg);-webkit-transform:rotate(90deg)
  }
}
@keyframes rotation{
  10%{
    transform:rotate(90deg);-webkit-transform:rotate(90deg)
  }
  50%,60%{
    transform:rotate(0deg);-webkit-transform:rotate(-0deg)
  }
  100%{
    transform:rotate(90deg);-webkit-transform:rotate(90deg)
  }
}
</style>
